<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #template {
        display: none;
      }

      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.5s ease;
      }

      .fade-enter-from,
      .fade-leave-to {
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <div id="template">
      <div id="transition-demo">
        <transition name="fade">
          <div v-if="ok" key="ok">toggled content</div>
        </transition>
        <button @click="toggle">Toggle</button>
      </div>
    </div>
    <div id="app"></div>
    <script src="../../../../packages/vue/dist/vue.global.js"></script>

    <script>
      const { createApp, ref } = Vue
    //   debugger

      const template = document.querySelector('#template')?.innerHTML
      const App = {
        setup() {
          const ok = ref(true)
          const toggle = () => (ok.value = !ok.value)
          return {
            ok,
            toggle
          }
        },
        template
      }

      createApp(App).mount('#app')

      //   const _Vue = Vue
      //   const {
      //     createVNode: _createVNode,
      //     createElementVNode: _createElementVNode,
      //     createCommentVNode: _createCommentVNode
      //   } = _Vue

      //   const _hoisted_1 = { id: 'transition-demo' }
      //   const _hoisted_2 = { key: 0 }
      //   const _hoisted_3 = ['onClick']

      //   function render(_ctx, _cache) {
      //     with (_ctx) {
      //       const {
      //         openBlock: _openBlock,
      //         createElementBlock: _createElementBlock,
      //         createCommentVNode: _createCommentVNode,
      //         Transition: _Transition,
      //         withCtx: _withCtx,
      //         createVNode: _createVNode,
      //         createElementVNode: _createElementVNode
      //       } = _Vue

      //       return (
      //         _openBlock(),
      //         _createElementBlock('div', _hoisted_1, [
      //           _createVNode(
      //             _Transition,
      //             { name: 'fade' },
      //             {
      //               default: _withCtx(() => [
      //                 ok
      //                   ? (_openBlock(),
      //                     _createElementBlock(
      //                       'div',
      //                       _hoisted_2,
      //                       'toggled content'
      //                     ))
      //                   : _createCommentVNode('v-if', true)
      //               ]),
      //               _: 1 /* STABLE */
      //             }
      //           ),
      //           _createElementVNode(
      //             'button',
      //             { onClick: toggle },
      //             'Toggle',
      //             8 /* PROPS */,
      //             _hoisted_3
      //           )
      //         ])
      //       )
      //     }
      //   }
      //
    </script>
  </body>
</html>
